<template>
	<view>
		<view class="top_area">
			<image src="../../static/login/bg.png" class="bg_img"></image>
			<view class="info_area">
				<view class="welcome" style="font-size: 40rpx;">南通市经开区重大项目全生命周期管理平台</view>
				<view class="welcome">Hi,欢迎用户登录</view>
			</view>
		</view>
		<view class="content_area">
			<view class="forms">
				<u-form :model="model" ref="uForm" :rules="rules">
					<u-form-item prop="phonenumber">
						<view class="input_item">
							<input type="number" maxlength="11" class="uni-input" v-model="model.phonenumber"
								@clear="model.phonenumber = ''" placeholder="请输入手机号" />
							<image src="../../static/login/icon_phone.png" class="before form_icon"></image>
							<image src="../../static/login/icon_close.png" class="after form_icon"
								@click="model.phonenumber = ''"></image>
						</view>
					</u-form-item>
					<u-form-item prop="smsCode">
						<view class="input_item">
							<input type="number" maxlength="10" class="uni-input" v-model="model.smsCode"
								@clear="model.smsCode = ''" placeholder="请输入验证码" />
							<image src="../../static/login/icon_password.png" class="before form_icon"></image>
							<view class="code-area after">
								<u-code ref="uCode1" @change="codeChange2" keep-running start-text="获取验证码"></u-code>
								<text @tap="getCode" :text="tips2" class="u-page__code-text">{{ tips2 }}</text>
							</view>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<button class="btn_area" :loading="loading" @click="login()">登录</button>
			<view class="bottom_area">
				<!-- <view class="remember">
					<checkbox-group @change="remember()">
						<label>
							<checkbox class="customBuleFontStyle" :checked="isRemember" />记住密码
						</label>
					</checkbox-group>
				</view> -->
				<view class="customBuleFontStyle">首次登录验证通过即注册平台账号!</view>
			</view>
		</view>
		<web-view v-if="showCaptcha" src="/hybrid/html/local.html" @message="handleWebViewMessage"
			@onPostMessage="handleWebViewMessage"></web-view>
	</view>
</template>

<script>
import {
	login,
	getUserInfo,
	captchaCheck,
	getSmsCode
} from '@/utils/api.js'
import {
	encrypt,
	decrypt
} from '@/utils/jsencrypt.js'
export default {
	data() {
		return {
			loading: false,
			model: {
				clientId: "e5cd7e4891bf95d1d19206ce24a7b32e",
				grantType: "sms",
				tenantId: "000000",
				phonenumber: "",
				smsCode: ""
			},
			captcha: "",
			baseId: "",
			isRemember: true,
			tips2: '',
			rules: {
				phonenumber: [{
					required: true,
					message: '请输入手机号',
					trigger: ['change', 'blur'],
				}],
				smsCode: [{
					required: true,
					message: '请输入验证码',
					trigger: ['change', 'blur'],
				}]
			},
			showCaptcha: false, // 控制WebView显示
		};
	},
	onLoad() {
		uni.setStorageSync("access_token", '')
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		codeChange2(text) {
			this.tips2 = text;
		},
		getCode() {
			let reg = /^1[0-9]{10}$/
			if (this.model.phonenumber.length <= 10 || !reg.test(this.model.phonenumber)) {
				uni.$u.toast('请输入正确的手机号!')
			} else {
				if (this.$refs.uCode1.canGetCode) {
					uni.showLoading();
					// 打开WebView验证码
					this.showCaptcha = true;
					uni.hideLoading();
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}				
			}
		},
		//跳转注册页面
		toRegister() {
			uni.navigateTo({
				url: './register',
				animationType: 'pop-in',
				animationDuration: 200
			})
		},
		//点击记住密码
		remember() {
			this.isRemember = !this.isRemember
		},
		//点击登录
		login() {
			this.$refs.uForm.validate().then(res => {
				this.loading = true
				login(this.model).then(s => {
					if (s.code === 200) {
						uni.setStorageSync("access_token", 'Bearer ' + s.data
							.access_token)
						getUserInfo().then(s => {
							if (s.code === 200) {
								uni.setStorageSync("userinfo", s.data.user)
								uni.setStorageSync("roleinfo", s.data.roles)
								uni.switchTab({
									url: '../index/index'
								})
								this.loading = false
							} else {
								this.loading = false
								uni.showToast({
									title: s.msg,
									icon: 'none'
								})
							}
						});
					} else {
						this.loading = false
						uni.showToast({
							title: s.msg,
							icon: 'none'
						})
					}
				});
			}).catch(errors => {
				// uni.$u.toast('校验失败')
			})
		},
		toPassword() {
			uni.navigateTo({
				url: './findPassword',
				animationType: 'pop-in',
				animationDuration: 200
			})
		},
		// WebView消息处理
		handleWebViewMessage(e) {
			const res = e.detail.data[0].res;
			if (res.ret === 0) {
				// 验证成功，关闭WebView
				this.showCaptcha = false;
				// 发送短信验证码
				uni.showLoading({
					title: '正在验证'
				});
				captchaCheck({
					ticket: res.ticket,
					randstr: res.randstr  // 确保webview返回中包含randstr
				}).then(checkRes => {
					if (checkRes.code === 200) {
						this.showCaptcha = false;
						// 验证通过后发送短信
						getSmsCode({
							phonenumber: this.model.phonenumber,
							ticket: res.ticket
						}).then((smsRes) => {
							uni.hideLoading();
							if (smsRes.code === 200) {
								uni.$u.toast('验证码已发送');
								this.$refs.uCode1.start();
							} else {
								uni.showToast({ title: smsRes.msg, icon: 'none' });
							}
						});
					} else {
						uni.hideLoading();
						uni.showToast({ title: '验证失败: ' + checkRes.msg, icon: 'none' });
					}
				}).catch(err => {
					uni.hideLoading();
					uni.showToast({ title: '验证异常，请重试', icon: 'none' });
				});
			} else {
				this.showCaptcha = false;
				uni.$u.toast('验证取消或失败');
			}
		},
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #FFFFFF;
}

.top_area {
	position: relative;

	.bg_img {
		width: 100%;
		height: 430rpx;
	}

	.info_area {
		position: absolute;
		top: 40%;
		left: 20%;
		width: 70%;
		transform: translateY(-50%);

		.logo {
			width: 420rpx;
			height: 72rpx;
		}

		.welcome {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			margin-top: 30rpx;
		}
	}
}

.content_area {
	padding: 30rpx 40rpx;

	.forms {
		margin: 20rpx 0;

		.form_icon {
			width: 44rpx;
			height: 80rpx;
			margin: 0 16rpx;
			padding: 18rpx 0;
		}

		.captcha {
			width: 180rpx;
			height: 70rpx;
			margin-right: 20rpx;
		}
	}

	.u-form-item ::v-deep .u-input {
		background-color: #F4F7FC;
		// height: 100rpx;
		border: 0;
	}

	.u-form-item::after {
		border: none;
	}

	.btn_area {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		// padding: 25rpx 0;
		width: 100%;
		background: rgba(34, 118, 227, 1);
		border-radius: 50rpx;
		// text-align: center;
	}

	.bottom_area {
		padding: 40rpx 20rpx;
		text-align: center;
	}
}

.input_item {
	background-color: #F4F7FC;
	padding: 30rpx 100rpx;
	width: 100%;
	border-radius: 50rpx;
	position: relative;

	.before {
		position: absolute;
		top: 50%;
		left: 20rpx;
		transform: translateY(-50%);
		z-index: 6;
	}

	.after {
		position: absolute;
		top: 50%;
		right: 20rpx;
		transform: translateY(-50%);
		z-index: 6;
	}
}

uni-checkbox ::v-deep .uni-checkbox-input {
	width: 26rpx;
	height: 26rpx;
}

.code-area {
	font-family: PingFang SC, PingFang SC;
	font-weight: 500;
	font-size: 28rpx;
	color: #004CA2;
}
</style>